<template>
  <div class="landing-page">
    <header class="header">
      <div class="container">
        <div class="logo">
          <XIcon :icon="ElementPlus" :size="36" color="#409EFF"></XIcon>
          <span> CodeX Platform</span>
        </div>
        <nav class="nav">
          <a href="#features"> 产品特性</a>
          <a href="#solutions"> 解决方案</a>
          <a href="#cases"> 客户案例</a>
          <a href="#pricing"> 价格方案</a>
        </nav>
        <div class="actions">
          <ElButton type="text"> 登录</ElButton>
          <ElButton type="primary"> 免费试用</ElButton>
        </div>
      </div>
    </header>
    <section class="hero">
      <div class="container">
        <div class="content">
          <h1>下一代低代码开发平台</h1>
          <p class="subtitle">可视化构建企业级应用，开发效率提升10倍</p>
          <div class="cta-buttons">
            <ElButton type="primary" size="large"> 立即开始</ElButton>
            <ElButton size="large"> 观看演示</ElButton>
          </div>
        </div>
        <div class="illustration">
          <img
            src="https://picsum.photos/800/600?random=1"
            alt="低代码平台界面展示"
            class="hero-image" />
        </div>
      </div>
    </section>
    <section class="partners">
      <div class="container">
        <p class="section-title">信任我们的行业领导者</p>
        <div class="partner-logos">
          <img src="https://picsum.photos/120/60?random=2" alt="合作伙伴1" />
          <img src="https://picsum.photos/120/60?random=3" alt="合作伙伴2" />
          <img src="https://picsum.photos/120/60?random=4" alt="合作伙伴3" />
          <img src="https://picsum.photos/120/60?random=5" alt="合作伙伴4" />
          <img src="https://picsum.photos/120/60?random=6" alt="合作伙伴5" />
        </div>
      </div>
    </section>
    <section id="features" class="features">
      <div class="container">
        <h2 class="section-title">核心特性</h2>
        <p class="section-subtitle">为开发者打造的全能低代码平台</p>
        <div class="feature-grid">
          <div class="feature-card">
            <div class="icon-wrapper">
              <XIcon :icon="MagicStick" :size="36" color="#409EFF"></XIcon>
            </div>
            <h3>可视化开发</h3>
            <p>拖拽式组件构建界面，实时预览效果，告别繁琐编码</p>
          </div>
          <div class="feature-card">
            <div class="icon-wrapper">
              <XIcon :icon="Connection" :size="36" color="#409EFF"></XIcon>
            </div>
            <h3>多端适配</h3>
            <p>一次开发，多端运行，自动适配PC/移动/平板设备</p>
          </div>
          <div class="feature-card">
            <div class="icon-wrapper">
              <XIcon :icon="DataBoard" :size="36" color="#409EFF"></XIcon>
            </div>
            <h3>数据建模</h3>
            <p>可视化数据模型设计，自动生成RESTful API</p>
          </div>
          <div class="feature-card">
            <div class="icon-wrapper">
              <XIcon :icon="SetUp" :size="36" color="#409EFF"></XIcon>
            </div>
            <h3>工作流引擎</h3>
            <p>可视化流程设计，支持复杂业务逻辑编排</p>
          </div>
          <div class="feature-card">
            <div class="icon-wrapper">
              <XIcon :icon="Lock" :size="36" color="#409EFF"></XIcon>
            </div>
            <h3>权限控制</h3>
            <p>细粒度权限管理，支持RBAC模型</p>
          </div>
          <div class="feature-card">
            <div class="icon-wrapper">
              <XIcon :icon="Cloudy" :size="36" color="#409EFF"></XIcon>
            </div>
            <h3>云原生支持</h3>
            <p>一键部署到公有云/私有云，支持容器化</p>
          </div>
        </div>
      </div>
    </section>
    <section class="stats">
      <div class="container">
        <div class="stat-item">
          <div class="stat-value">10,000+</div>
          <div class="stat-label">企业用户</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">85%</div>
          <div class="stat-label">开发效率提升</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">50+</div>
          <div class="stat-label">行业解决方案</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">99.9%</div>
          <div class="stat-label">系统可用性</div>
        </div>
      </div>
    </section>
    <section id="cases" class="cases">
      <div class="container">
        <h2 class="section-title">客户案例</h2>
        <p class="section-subtitle">各行业领先企业的共同选择</p>
        <div class="case-slider">
          <div class="case-card">
            <img
              src="https://picsum.photos/400/300?random=7"
              alt="金融行业案例" />
            <div class="case-content">
              <h3>某大型银行</h3>
              <p class="industry">金融行业</p>
              <p class="desc">
                通过我们的低代码平台，3个月内完成了核心业务系统的重构，开发成本降低60%
              </p>
              <ElButton type="text">
                <span> 查看详情</span>
                <XIcon :icon="ArrowRight" :size="16"></XIcon
              ></ElButton>
            </div>
          </div>
          <div class="case-card">
            <img
              src="https://picsum.photos/400/300?random=8"
              alt="制造业案例" />
            <div class="case-content">
              <h3>某汽车制造商</h3>
              <p class="industry">制造业</p>
              <p class="desc">
                构建了全渠道营销系统，支持2000+经销商使用，系统响应时间提升300%
              </p>
              <ElButton type="text">
                <span> 查看详情</span>
                <XIcon :icon="ArrowRight" :size="16"></XIcon
              ></ElButton>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="cta">
      <div class="container">
        <h2>准备好开始您的低代码之旅了吗？</h2>
        <p>立即注册，享受14天免费试用</p>
        <ElButton type="primary" size="large"> 免费试用</ElButton>
      </div>
    </section>
    <footer class="footer">
      <div class="container">
        <div class="footer-column">
          <h4>产品</h4>
          <a href="#"> 功能特性</a>
          <a href="#"> 价格方案</a>
          <a href="#"> 更新日志</a>
          <a href="#"> API文档</a>
        </div>
        <div class="footer-column">
          <h4>资源</h4>
          <a href="#"> 帮助中心</a>
          <a href="#"> 开发者社区</a>
          <a href="#"> 学习教程</a>
          <a href="#"> 博客</a>
        </div>
        <div class="footer-column">
          <h4>公司</h4>
          <a href="#"> 关于我们</a>
          <a href="#"> 加入我们</a>
          <a href="#"> 联系我们</a>
          <a href="#"> 合作伙伴</a>
        </div>
        <div class="footer-column">
          <h4>关注我们</h4>
          <div class="social-links">
            <a href="#"> <XIcon :icon="Comment" :size="20"></XIcon></a>
            <a href="#"> <XIcon :icon="VideoCamera" :size="20"></XIcon></a>
            <a href="#"> <XIcon :icon="Link" :size="20"></XIcon></a>
            <a href="#"> <XIcon :icon="ChromeFilled" :size="20"></XIcon></a>
          </div>
          <p class="copyright">© 2023 CodeX Platform. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import { XIcon } from '@vtj/ui';
  import { ElButton } from 'element-plus';
  import {
    ElementPlus,
    MagicStick,
    Connection,
    DataBoard,
    SetUp,
    Lock,
    Cloudy,
    ArrowRight,
    Comment,
    VideoCamera,
    Link,
    ChromeFilled
  } from '@vtj/icons';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'Text2Code',
    components: { XIcon, ElButton },
    setup(props) {
      const provider = useProvider({ id: '17ubzjua', version: '1752732622599' });
      const state = reactive({});
      return {
        state,
        props,
        provider,
        ElementPlus,
        MagicStick,
        Connection,
        DataBoard,
        SetUp,
        Lock,
        Cloudy,
        ArrowRight,
        Comment,
        VideoCamera,
        Link,
        ChromeFilled
      };
    }
  })
</script>
<style lang="scss" scoped>
  .landing-page {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
  }
  .landing-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .landing-page .header {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
  }
  .landing-page .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .landing-page .header .logo {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #409eff;
  }
  .landing-page .header .logo span {
    margin-left: 10px;
  }
  .landing-page .header .nav {
    display: flex;
    gap: 30px;
  }
  .landing-page .header .nav a {
    color: #666;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
  }
  .landing-page .header .nav a:hover {
    color: #409eff;
  }
  .landing-page .header .actions {
    display: flex;
    gap: 15px;
  }
  .landing-page .hero {
    padding: 180px 0 100px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }
  .landing-page .hero .container {
    display: flex;
    align-items: center;
    gap: 50px;
  }
  .landing-page .hero .content {
    flex: 1;
  }
  .landing-page .hero .content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1a1a1a;
    line-height: 1.2;
  }
  .landing-page .hero .content .subtitle {
    font-size: 20px;
    color: #666;
    margin-bottom: 30px;
  }
  .landing-page .hero .content .cta-buttons {
    display: flex;
    gap: 15px;
  }
  .landing-page .hero .illustration {
    flex: 1;
  }
  .landing-page .hero .illustration .hero-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }
  .landing-page .partners {
    padding: 60px 0;
    background: #fff;
  }
  .landing-page .partners .section-title {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
  }
  .landing-page .partners .partner-logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
  }
  .landing-page .partners .partner-logos img {
    height: 40px;
    opacity: 0.7;
    transition: opacity 0.3s;
  }
  .landing-page .partners .partner-logos img:hover {
    opacity: 1;
  }
  .landing-page .features {
    padding: 100px 0;
    background: #f9fafc;
  }
  .landing-page .features .section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 15px;
  }
  .landing-page .features .section-subtitle {
    text-align: center;
    color: #666;
    font-size: 18px;
    margin-bottom: 60px;
  }
  .landing-page .features .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }
  .landing-page .features .feature-card {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transition:
      transform 0.3s,
      box-shadow 0.3s;
  }
  .landing-page .features .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }
  .landing-page .features .feature-card .icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(64, 158, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .landing-page .features .feature-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .landing-page .features .feature-card p {
    color: #666;
    line-height: 1.6;
  }
  .landing-page .stats {
    padding: 80px 0;
    background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
    color: #fff;
  }
  .landing-page .stats .container {
    display: flex;
    justify-content: space-around;
    text-align: center;
  }
  .landing-page .stats .stat-item .stat-value {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .landing-page .stats .stat-item .stat-label {
    font-size: 18px;
    opacity: 0.9;
  }
  .landing-page .cases {
    padding: 100px 0;
    background: #fff;
  }
  .landing-page .cases .section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 15px;
  }
  .landing-page .cases .section-subtitle {
    text-align: center;
    color: #666;
    font-size: 18px;
    margin-bottom: 60px;
  }
  .landing-page .cases .case-slider {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding-bottom: 20px;
  }
  .landing-page .cases .case-card {
    min-width: 400px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  .landing-page .cases .case-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .landing-page .cases .case-card .case-content {
    padding: 25px;
  }
  .landing-page .cases .case-card .case-content h3 {
    font-size: 20px;
    margin-bottom: 5px;
  }
  .landing-page .cases .case-card .case-content .industry {
    color: #409eff;
    font-weight: 500;
    margin-bottom: 15px;
  }
  .landing-page .cases .case-card .case-content .desc {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
  }
  .landing-page .cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    text-align: center;
  }
  .landing-page .cta h2 {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .landing-page .cta p {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
  }
  .landing-page .footer {
    background: #1a1a1a;
    color: #fff;
    padding: 60px 0 30px;
  }
  .landing-page .footer .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
  }
  .landing-page .footer .footer-column h4 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 500;
  }
  .landing-page .footer .footer-column a {
    display: block;
    color: #aaa;
    margin-bottom: 12px;
    text-decoration: none;
    transition: color 0.3s;
  }
  .landing-page .footer .footer-column a:hover {
    color: #fff;
  }
  .landing-page .footer .footer-column .social-links {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
  }
  .landing-page .footer .footer-column .social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
  }
  .landing-page .footer .footer-column .social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  .landing-page .footer .footer-column .copyright {
    color: #666;
    font-size: 14px;
  }
  @media (max-width: 768px) {
    .landing-page .header .nav {
      display: none;
    }
    .landing-page .hero {
      padding: 120px 0 60px;
    }
    .landing-page .hero .container {
      flex-direction: column;
    }
    .landing-page .hero .content {
      text-align: center;
      margin-bottom: 40px;
    }
    .landing-page .hero .content .cta-buttons {
      justify-content: center;
    }
    .landing-page .stats .container {
      flex-direction: column;
      gap: 40px;
    }
  }
</style>
